/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useState, useEffect } from 'react';
import { Button, message, Space, Popconfirm } from 'antd';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import KbDeliveryModal from '@/components/_pages/jdk/shield/components/KbDeliveryModal';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { ConnectState } from '@/models/connect';
import type { SHIELE_COLUMNS } from '@/components/_pages/jdk/index.d';
import {
  getForbidList,
  removeDelivery,
  createDelivery,
  modifyDelivery,
} from '@/services/jdk/shield';
import { shieldColumns } from '@/components/_pages/jdk/index.config';
import { useSelector } from 'umi';

const Index = ({ show }: { show: boolean }) => {
  const actionRef = useRef<ActionType>();
  const [record, setRecord] = useState<any>({ radio: '0' });
  const [visible, setVisible] = useState<boolean>(false);
  const { winSize } = useSelector((state: ConnectState) => state.global);

  const onClose = () => {
    setVisible(false);
    setRecord({ radio: '0' });
  };
  const handelAddLeague = () => setVisible(true);
  const handleOption = (record_: any) => {
    const { area_code_list: area } = record_;
    setRecord({ area, ...record_ });
    handelAddLeague();
  };

  const handleRemove = (record_: any) => {
    const { id } = record_;
    removeDelivery({ id }).then((res) => {
      const { code, msg } = res;
      if (code == 0) {
        message.success('操作成功');
        actionRef.current?.reload(true);
      } else {
        message.error(msg);
      }
    });
  };

  const onSubmit = async (values: any) => {
    let api = createDelivery;
    if (record && record.id) {
      const { id, brand, remark } = record;
      values = {
        ...values,
        brand,
        remark,
        id,
      };
      api = modifyDelivery;
    }

    api(values).then((res) => {
      const { code, msg } = res;
      if (code == 0) {
        actionRef.current?.reload();
        message.success(msg);
        onClose();
      } else {
        message.error(msg);
      }
    });
  };

  const optionColumns: ProColumns<SHIELE_COLUMNS>[] = [
    {
      title: '操作',
      valueType: 'option',
      width: winSize === 'xs' ? 80 : 120,
      align: 'center',
      fixed: 'right',
      render: (_, item) => {
        const { league_id } = item;
        return (
          <Space direction='vertical'>
            {!league_id && Number(league_id) <= 0 && (
              <a onClick={handleOption.bind(null, item)}>修改</a>
            )}
            <Popconfirm title='你确定删除吗？' onConfirm={handleRemove.bind(null, item)}>
              <a>删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  const queryTable = async (values: any) => {
    const { current: page, pageSize } = values;
    const { code, data, msg } = await getForbidList({ page, size: pageSize });
    if (code == 0) {
      return {
        data: data.list || [],
        total: data.total,
      };
    } else {
      message.error(msg);
      return {};
    }
  };
  useEffect(() => {
    if (show) actionRef.current?.reload();
  }, [show]);
  return (
    <DragTable>
      <ProTable
        rowKey='id'
        actionRef={actionRef}
        cardProps={{
          extra: [
            <Button key='add' type='primary' onClick={handelAddLeague}>
              添加
            </Button>,
          ],
        }}
        request={queryTable}
        columns={[...shieldColumns, ...optionColumns]}
        toolBarRender={false}
        pagination={{
          pageSize: 20,
          showQuickJumper: false,
          showSizeChanger: false,
        }}
        search={false}
        scroll={{
          x: 1200,
        }}
      />
      <KbDeliveryModal visible={visible} onSubmit={onSubmit} record={record} onClose={onClose} />
    </DragTable>
  );
};

export default Index;
